<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-bar {
				background-color: #17B8CC;
			}
			
			.mui-bar a,
			.mui-bar h1 {
				color: #fff;
			}
			
			.mui-table h4,
			.mui-table h5,
			.mui-table .mui-h5,
			.mui-table .mui-h6,
			.mui-table p {
				margin-top: 0;
			}
			
			.mui-table h4 {
				line-height: 21px;
				font-weight: 500;
			}
			
			.mui-table a {
				color: #222;
			}
			
			.mui-navigate-right:after {
				right: 0px;
			}
			
			.mui-icon {
				margin-right: 9px;
				color: #17B8CC;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">设备列表</h1>
		</header>
		
		<div class="mui-content" id="device_list" style="margin-top: -14px;">
		</div>
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			
			mui.plusReady(function(){
				var self = plus.webview.currentWebview();
				var city = self.city;
				var state = app.getState();
				mui.ajax({
					type:"get",
					url:"http://121.196.221.74/devices/city/"+city,
					async:true,
					headers:{'AUTHORIZATION':'token ' + state.token},
					dataType:'json',
					success:function(data){
						//alert(JSON.stringify(data));
						if(data && data.length > 0){
							var listHtml = '';
							for (var i in data) {
								var dev = data[i];
								if(dev.city=='市辖区'){
									dev.city = ''	
								}
								var online = dev.online == 1 ? 'green':'red';
								listHtml += '<ul class="mui-table-view" ><li class="mui-table-view-cell">'+
												'<div class="mui-table" onclick="openMonitor(\''+ dev.id +'\')">'+
													'<div class="mui-table-cell mui-col-xs-10">'+
														'<h4 class="mui-ellipsis"><span class="mui-icon mui-icon-home"></span>'+
														  dev.name +	
														'</h4>'	+
														'<p class="mui-h5 mui-ellipsis"><span class="mui-icon mui-icon-location"></span>'+
														 dev.province+dev.city+dev.area+dev.street + '</p>'+
													'</div>'+
													'<div class="mui-table-cell mui-col-xs-2 mui-text-right">'+
														'<a class="mui-navigate-right" href="javascript:;"></a>'+														
							                        '</div>'+
												'</div>'+
											'</li></ul>'
							}
							document.getElementById('device_list').innerHTML = listHtml;
						}
					}
				});
				
			});
			
			function openMonitor(devid){
				mui.openWindow({
					id: 'device_monitor.html',
					url: 'device_monitor.html',
					show: {
						aniShow: 'pop-in'
					},
					styles: {
						popGesture: 'hide'
					},
					waiting: {
						autoShow: false
					},
					extras:{
						did:devid
					}
				});				
			}
		</script>
	</body>

</html>